<template>
  <view>
    <view class="back"></view>
    <view class="search-box">
      <view class="search">
        <view class="search-icon-box">
          <image
              class="search-icon"
              :src="$kt.file.byPath('image/search.svg')"></image>
        </view>
        <view class="search-text">
          <input
            class="search-input"
            v-model="keyword"
            @input="filter()"
            :placeholder="$i18n.zhToGlobal('搜索商品')"
          ></input>
        </view>
      </view>
    </view>
    <view style="height: 90rpx"></view>
    <view class="box">
      <view>
        <view
            v-for="(item, index) in filterGoodsList"
            class="goods-card-box">
            <goods-card-2
                :item="item"
            ></goods-card-2>
        </view>

      </view>
    </view>
  </view>
</template>

<script>
import shop from "@/js/shop";
export default {
  data() {
    return {
      list:[],
      goodsList:[],
      keyword: '',
      filterList:[],
      filterGoodsList:[],
    };
  },
  created() {
    // 修改标题
    uni.setNavigationBarTitle({
      title: this.$i18n.zhToGlobal('收藏')
    });

    this.getList();

    this.$kt.event.on("goodsCollect:change", ()=>{
      this.getList();
    });
  },
  methods:{
    filter(){
      this.filterGoodsList = this.goodsList.filter(item => item.name.indexOf(this.keyword) !== -1);
    },
    // /business-shop-web/goodsCollect/getCollectGoodsSelf
    getList(){
      this.$kt.request.send({
        uri: '/business-shop-web/goodsCollect/getCollectGoodsSelf',
        stateSuccess: (res) => {
          this.list = res.data;
          this.goodsList = this.list.map(item => item.goods);
          shop.handleList(this.goodsList).then((res)=>{
            this.goodsList = res;
            this.filter();
          });
        },
        stateFail: (err) => {
          uni.showToast({
            title: err.errMsg,
            icon: 'none'
          });
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.back{
  background-color: #FFFFFF;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
}

.box{
  padding: 20rpx;
  box-sizing: border-box;
}

.goods-card-box{
  margin-bottom: 20rpx;
}

.search-box{
  padding: 20rpx;
  box-sizing: border-box;
  background-color: #FFFFFF;
  box-shadow: 0 0 10rpx 0 rgba(0,0,0,0.1);
  position: fixed;
  top: 0;
  // #ifdef H5
  top: 80rpx;
  // #endif
  left: 0;
  width: 100vw;
  z-index: 1;
  .search {
    background-color: #F0F0F0;
    border-radius: 20rpx;
    padding: 10rpx;

    .search-icon-box {
      width: 30rpx;
      height: 30rpx;
      border-radius: 20rpx;
      display: inline-block;
      vertical-align: top;

      .search-icon {
        width: 100%;
        height: 100%;
      }
    }

    .search-text {
      display: inline-block;
      width: calc(100% - 50rpx);
      font-size: 24rpx;
      color: #999;
      margin-left: 10rpx;
    }
  }
}

</style>
